<template>
	<div class="card">
		<el-card :shadow="props.shadow">
			<template v-if="props.title" #header>
				<div class="w-full flex justify-between items-center">
					<HyTitle :title="title" :tooltip="tooltip" />
					<slot name="button"></slot>
				</div>
			</template>
			<slot name="default"></slot>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import HyTitle from '/@/components/HyTitle/index.vue';
const props = defineProps({
	shadow: {
		type: String,
		default: 'hover',
	},
	title: {
		type: String,
		default: '',
	},
	tooltip: {
		type: Object,
		default: () => {
			return {
				message: '',
				position: '',
			};
		},
	},
	firstTabList: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
</script>
<style scoped lang="scss">
.card {
	:deep(.el-card__header) {
		padding: 10px 20px;
	}
	:deep(.el-card__body) {
		padding: 20px 20px;
	}
}
</style>
